<template>
  <div class="game-container">
    <!-- 玩家 1 - 正上方 -->
    <div class="player player-top">
      <div class="card-row">
        <div v-for="card in players[0].cards" :key="card" class="card">
          <span>{{ card }}</span>
          <input
            v-model.number="players[0].cardCount[card]"
            type="number"
            :min="0"
            :max="16"
            class="card-input"
            @input="updateRemainingCards"
          >
        </div>
      </div>
    </div>

    <!-- 玩家 2 - 正右边 -->
    <div class="player player-right">
      <div class="card-row">
        <div v-for="card in players[1].cards" :key="card" class="card">
          <span>{{ card }}</span>
          <input
            v-model.number="players[1].cardCount[card]"
            type="number"
            :min="0"
            :max="16"
            class="card-input"
            @input="updateRemainingCards"
          >
        </div>
      </div>
    </div>

    <!-- 玩家 3 - 正下方 -->
    <div class="player player-bottom">
      <div class="card-row">
        <div v-for="card in players[2].cards" :key="card" class="card">
          <span>{{ card }}</span>
          <input
            v-model.number="players[2].cardCount[card]"
            type="number"
            :min="0"
            :max="16"
            class="card-input"
            @input="updateRemainingCards"
          >
        </div>
      </div>
    </div>

    <!-- 玩家 4 - 正左边 -->
    <div class="player player-left">
      <div class="card-row">
        <div v-for="card in players[3].cards" :key="card" class="card">
          <span>{{ card }}</span>
          <input
            v-model.number="players[3].cardCount[card]"
            type="number"
            :min="0"
            :max="16"
            class="card-input"
            @input="updateRemainingCards"
          >
        </div>
      </div>
    </div>

    <!-- 剩余牌 - 页面正中间 -->
    <div class="remaining-cards">
      <h3>剩余:</h3>
      <div class="remaining-cards-row">
        <div v-for="(count, card) in remainingCards" :key="card" class="remaining-card">
          <span class="card-info">
            <span class="card-name">{{ card }}</span>
            <span class="card-count" :style="getCardColor(count)">{{ count }} 张</span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 修改卡片值，增加"王"牌
      values: ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A', '王'], // 增加"王"牌
      // 每个玩家的手牌和已打过的牌
      players: [
        { name: '玩家 1', cards: [], cardCount: {}, playedCards: [] },
        { name: '玩家 2', cards: [], cardCount: {}, playedCards: [] },
        { name: '玩家 3', cards: [], cardCount: {}, playedCards: [] },
        { name: '玩家 4', cards: [], cardCount: {}, playedCards: [] }
      ],
      // 初始化剩余牌
      remainingCards: {}
    }
  },
  mounted() {
    this.createPlayerCards() // 初始化玩家手牌和剩余牌
  },
  methods: {
    // 初始化玩家手牌和剩余牌
    createPlayerCards() {
      const allCards = [...this.values] // 玩家手牌为2-A和"王"
      // 每个玩家获取一组2到A和"王"的牌
      this.players.forEach(player => {
        player.cards = [...allCards] // 每个玩家拿到一组2-A和"王"的牌
        player.cardCount = this.createCardCount() // 初始化每个牌的打出张数
      })

      // 初始化剩余牌（每张牌有16张，总共有4副牌，每副13张，"王"有8张）
      this.remainingCards = this.createRemainingCards()
    },

    // 创建一副牌的记录，用来记录每个玩家每张牌的打出张数
    createCardCount() {
      const cardCount = {}
      this.values.forEach(value => {
        cardCount[value] = '' // 默认打出的张数为空
      })
      return cardCount
    },

    // 初始化剩余牌的数量（每张牌有16张，"王"有8张）
    createRemainingCards() {
      const remaining = {}
      this.values.forEach(value => {
        if (value === '王') {
          remaining[value] = 8 // "王"牌有8张
        } else {
          remaining[value] = 16 // 其他牌依然保持16张
        }
      })
      return remaining
    },

    // 更新剩余牌的数量
    updateRemainingCards() {
      // 重置剩余牌
      const remaining = {}

      // 每张牌从16开始
      this.values.forEach(card => {
        let remainingCount = (card === '王') ? 8 : 16 // "王"牌剩余数量为8
        // 计算所有玩家打出的数量
        this.players.forEach(player => {
          const count = player.cardCount[card] ? parseInt(player.cardCount[card]) : 0
          remainingCount -= count // 减去玩家打出的张数
        })
        remaining[card] = remainingCount // 更新剩余数量
      })

      // 更新剩余牌的数量
      this.remainingCards = remaining
    },

    // 根据剩余数量返回对应的颜色样式
    getCardColor(count) {
      if (count === 16) {
        return { color: 'green' } // 剩余数量为16时，显示绿色
      } else if (count === 0) {
        return { color: 'red' } // 剩余数量为0时，显示红色
      }
      return { color: '#f90' } // 其他情况显示橙色
    }
  }
}

</script>

<style>
.game-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow-x: hidden;
}

.player {
  position: absolute;
  width: 500px;
  padding: 10px;
  word-wrap: break-word;
}

.player-top {
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
}

.player-right {
  right: 140px;
  top: 50%;
  transform: translateY(-50%);
}

.player-bottom {
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
}

.player-left {
  left: 140px;
  top: 50%;
  transform: translateY(-50%);
}

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

input.card-input {
  width: 100px;
  height: 40px;
  font-size: 18px;
  text-align: center;
  margin-top: 5px;
  padding: 5px;
  color: DodgerBlue;
}

.remaining-cards {
  margin-top: 20px;
  width: 500px;
  display: flex;
  justify-content: space-between;
}

.remaining-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.remaining-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.remaining-cards span {
  font-weight: bold;
  font-size: 18px;
}

.card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-name {
  font-size: 18px;
}

.card-count {
  font-size: 18px;
}

.input-gray {
  color: gray;  /* 输入值为0时，文本颜色为灰色 */
}

</style>
